<!--楼宇设备-->
<template>
  <div class="main">
    <!--头部-->
    <basic-layout title="楼宇设备详情" :showAddBtn="false">
    <!--数据-->
    <van-form class="dataStyle" ref="form">
      <van-cell-group>
        <div class="cellDataStyle">
          <div class="imgStyle1" />
          <div class="cellTextStyle">
            <van-field
              readonly
              disabled
              v-model="dataInfo.louysbxx.SWID"
              label="实物ID"
              input-align="right"
            />
          </div>
        </div>
        <div class="cellDataStyle">
          <div class="imgStyle2" />
          <div class="cellTextStyle">
            <van-field
              readonly
              disabled
              v-model="dataInfo.louysbxx.SBMC"
              label="设备名称"
              input-align="right"
            />
          </div>
        </div>

        <div class="cellDataStyle">
          <div class="imgStyle3" />
          <div class="cellTextStyle">
            <van-field
              readonly
              disabled
              v-model="dataInfo.louysbxx.SBXH"
              label="设备型号"
              input-align="right"
            />
          </div>
        </div>

        <div class="cellDataStyle">
          <div class="imgStyle4" />
          <div class="cellTextStyle">
            <van-field
              readonly
              disabled
              v-model="dataInfo.louysbxx.SBBH"
              label="设备编号"
              input-align="right"
            />
          </div>
        </div>

        <div class="cellDataStyle">
          <div class="imgStyle5" />
          <div class="cellTextStyle">
            <van-field
              readonly
              disabled
              v-model="dataInfo.louysbxx.ZCYZ"
              label="资产原值(元)"
              input-align="right"
            />
          </div>
        </div>

        <div class="cellDataStyle">
          <div class="imgStyle6" />
          <div class="cellTextStyle">
            <van-field
              readonly
              disabled
              v-model="dataInfo.louysbxx.SBDL"
              label="设备大类"
              input-align="right"
            />
          </div>
        </div>

        <div class="cellDataStyle">
          <div class="imgStyle7" />
          <div class="cellTextStyle">
            <van-field
              readonly
              disabled
              v-model="dataInfo.louysbxx.SBXL"
              label="设备小类"
              input-align="right"
            />
          </div>
        </div>

        <div class="van-hairline--top vanHairlineTop"></div>

        <div class="cellTextStyleSingle">
          <van-field
            readonly
            disabled
            v-model="dataInfo.louysbxx.LOUYMC"
            label="所属楼宇"
            input-align="right"
          />
        </div>

        <div class="cellTextStyleSingle">
          <van-field
            readonly
            disabled
            v-model="dataInfo.louysbxx.SCCJ"
            label="生产厂家"
            input-align="right"
          />
        </div>
        <div class="cellTextStyleSingle">
          <van-field
            readonly
            disabled
            v-model="dataInfo.louysbxx.CCSJ"
            label="出厂时间"
            input-align="right"
          />
        </div>
        <div class="cellTextStyleSingle">
          <van-field
            readonly
            disabled
            v-model="dataInfo.louysbxx.TYRQ"
            label="投运日期"
            input-align="right"
          />
        </div>
        <div class="cellTextStyleSingle">
          <van-field
            readonly
            disabled
            v-model="dataInfo.louysbxx.SHIYNX"
            label="设计年限(年)"
            input-align="right"
          />
        </div>
        <div class="cellTextStyleSingle">
          <van-field
            readonly
            disabled
            v-model="dataInfo.louysbxx.BATCH1"
            label="采购批次"
            input-align="right"
          />
        </div>
        <div class="cellTextStyleSingle">
          <van-field
            readonly
            disabled
            v-model="dataInfo.louysbxx.ZHUANGT"
            label="运行状态"
            input-align="right"
          />
        </div>

        <div class="van-hairline--top vanHairlineTop"></div>

        <div class="remarkStyle">
          <div class="remarkUpTextStyle">
            <div class="imgStyle8" />
            <div>备注</div>
          </div>
          <div class="remarkDownTextStyle">
            <van-field
              readonly
              disabled
              v-model="dataInfo.louysbxx.BEIZ"
              rows="2"
              autosize
              type="textarea"
            />
          </div>
        </div>
      </van-cell-group>
    </van-form>
    <fullLoading v-if="loading"></fullLoading>
    </basic-layout>
  </div>

</template>
<script>
import { getLouysbQuanxst } from "@/api/srvAssurance/assetLabel/assetLabel";
export default {
  data() {
    return {
      loading: false,
      dataInfo: {
        louysbxx: {},
        getcaigpcMap: {},
      },
    };
  },

  created() {
    if (this.$router.history.current.query.id) {
      this.initData(this.$router.history.current.query.id);
    }
  },

  methods: {
    async initData(id) {
      this.loading = true;
      let resData = await getLouysbQuanxst({ id: id });
      this.loading = false;
      this.dataInfo = {};
      if (resData.status === 0) {
        this.dataInfo = resData.data;
      }
    },
  },
};
</script>

<style scoped lang="less">
.main {
  height: 100%;
  background-color: #80808017;

  .mainUpStyle {
    background: -webkit-gradient(
      linear,
      0% 0%,
      100% 0%,
      from(rgb(14 150 216)),
      to(rgba(14, 150, 216, 0.53))
    );
    height: 55px;

    .upStyle {
      float: left;
      width: 100%;
      height: 56px;
      display: flex;
      justify-content: center;
      align-items: center;

      .textStyle {
        color: #ffff;
        font-size: 20px;
        font-weight: 500;
      }
    }
  }

  .dataStyle {
    overflow-y: scroll;
    height: calc(100% - 75px);
    margin: 10px;
    border-radius: 10px;

    .cellDataStyle {
      width: calc(100% - 30px);
      display: -webkit-inline-box;
      padding: 15px 15px 15px;

      .imgStyle1 {
        height: 24px;
        width: 20px;
        text-align: center;
        background: url("../../../assets/images/nx/icon_barcode.png")
        no-repeat;
        background-size: 100% 100%;
      }

      .imgStyle2 {
        height: 24px;
        width: 20px;
        text-align: center;
        background: url("../../../assets/images/nx/icon_device_name.png")
        no-repeat;
        background-size: 100% 100%;
      }

      .imgStyle3 {
        height: 24px;
        width: 20px;
        text-align: center;
        background: url("../../../assets/images/nx/icon_device_model.png")
        no-repeat;
        background-size: 100% 100%;
      }

      .imgStyle4 {
        height: 24px;
        width: 20px;
        text-align: center;
        background: url("../../../assets/images/nx/icon_device_category.png")
        no-repeat;
        background-size: 100% 100%;
      }

      .imgStyle5 {
        height: 20px;
        width: 20px;
        margin-top: 2px;
        text-align: center;
        background: url("../../../assets/images/nx/icon_money.png") no-repeat;
        background-size: 100% 100%;
      }

      .imgStyle6 {
        height: 24px;
        width: 20px;
        text-align: center;
        background: url("../../../assets/images/nx/icon_first_category.png")
        no-repeat;
        background-size: 100% 100%;
      }

      .imgStyle7 {
        height: 24px;
        width: 20px;
        text-align: center;
        background: url("../../../assets/images/nx/icon_second_category.png")
        no-repeat;
        background-size: 100% 100%;
      }

      .cellTextStyle {
        width: calc(100% - 24px);

        div {
          padding: 0px 0px 0px 15px;
        }
      }
    }

    .vanHairlineTop {
      margin: 0px 25px;
      height: 0px;
    }

    /deep/ .van-hairline--top:after {
      border: 1px solid #00000029;
    }

    .remarkStyle {
      padding: 15px 15px 50px 15px;

      .remarkUpTextStyle {
        display: -webkit-inline-box;

        .imgStyle8 {
          height: 20px;
          width: 20px;
          text-align: center;
          background: url("../../../assets/images/nx/icon_text_filled.png")
          no-repeat;
          background-size: 100% 100%;
        }
      }

      .remarkDownTextStyle {
        div {
          padding: 0px 0px 0px 5px;
        }
      }
    }

    .cellTextStyleSingle {
      padding: 15px;

      div {
        padding: 0px 0px 0px 15px;
      }
    }
  }

  .dialogMainStyle {
    .dialogSearchStyle {
      position: fixed;
      width: 100%;
    }

    .dialogDataStyle {
      text-align: center;
      margin-top: 50px;

      div {
        padding: 10px;
      }
    }
  }

  .vanDialogMainStyle {
    .vanDialogStyle {
      position: fixed;
      width: 100%;
    }

    .vanDialogDataStyle {
      text-align: center;
      margin-top: 50px;

      div {
        padding: 10px;
      }
    }
  }
}

/deep/ .van-dialog {
  height: 70%;
}

/deep/ .van-dialog__content {
  overflow-y: scroll;
  height: 90%;
}

/deep/ .van-field--disabled .van-field__label {
  color: #323233;
}

/deep/ .van-field__control:disabled {
  color: #323233;
  -webkit-text-fill-color: #323233;
}
</style>
